<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>预约详情</title>
    <link rel="stylesheet" href="../css/page-health-orderDetail.css"/>
    <link rel="stylesheet" href="../css/page-health-order.css"/>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <script src="../plugins/vue/vue.js"></script>
    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script src="../plugins/healthmobile.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script>
        var id = getUrlParam("id");
    </script>
    <style>
        .centerdiv {
            text-align: left;
            line-height: 80px;
        }

        .centerdiv .line {
            line-height: 60px;
            background-color: white;
            margin-top: 15px;
        }
        .centerdiv .line span{
            color: #0000cc;
        }

        .centerdiv .line img {
            width: 5%;
            height: 3%;
            vertical-align: middle;
        }
        .bottom{
            line-height: 60px;
            margin-top: 15px;
            background-color: white;
            text-align: center;
        }
        .bottom a{
            color: red;
        }
    </style>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app" class="app">
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back" onclick="history.go(-1)"></i></span>
        <span class="center">预约详情</span>
        <span class="f-right">
                   <div class="center_css" >
                       <a style="color: white" href="member.html">个人中心</a>
                   </div>
        </span>
    </div>
    <!-- 页面内容 -->
    <div class="contentBox">
        <div class="card">
            <div class="project-img">
                <img :src="'http://qiuo4nrcv.hn-bkt.clouddn.com/'+setmeal.img" width="100%"/>
            </div>
            <div class="project-text">
                <h4 class="tit">{{setmeal.name}}</h4>
                <p class="subtit">{{setmeal.remark}}</p>
                <p class="subtit" style="font-size: 18px;color: darkgreen">套餐价格:{{setmeal.price}}</p>
                <p class="keywords">
                    <span>{{setmeal.sex == '0' ? '性别不限' : setmeal.sex == '1' ? '男':'女'}}</span>
                    <span>{{setmeal.age}}</span>
                </p>
            </div>
        </div>

        <div class="centerdiv">
            <div class="line">
                <img src="../icon/doctor.png"/><span>预约人:</span>{{setmeal.orderPerson}}
            </div>

            <div class="line">
                <img src="../icon/hospital.png"/><span>预约方式:</span>{{setmeal.orderType}}
            </div>

            <div class="line">
                <img src="../icon/orderDate.png"/><span>预约时间:</span>{{setmeal.orderDate}}
            </div>

            <div class="line">
                <img src="../icon/orderStatus.png"/><span>到诊情况:</span>{{setmeal.orderStatus}}
            </div>

            <div class="line">
                <img src="../icon/orderAddress.png"/><span>预约体检机构地址:</span>{{setmeal.orderAddress}}
            </div>

            <div class="bottom">
                <a href="setmeal.html" class="order-btn">点击查看所有套餐</a>
            </div>
        </div>

    </div>
</div>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            imgUrl: null,//套餐对应的图片链接
            setmeal: {}, //模型数据（套餐信息），用于页面展示
            memberInfo: {},
        },
        methods: {},
        mounted() {
            //检查登录状态检查完毕后发送ajax请求将页面相关数据进行回填
            axios.post("/member/checkLogin.do").then((res) => {
                if (res.data.flag) {
                    //查询成功，为模型数据赋值
                    this.memberInfo = res.data.data;
                    //发送请求获取当前界面所需数据
                    axios.post("/setmeal/getOrderSetmealByMemberId.do", {
                        memberId: this.memberInfo.id, orderId: id
                    }).then((res) => {
                        if (res.data.flag) {
                            //查询成功
                            this.setmeal = res.data.data[0];
                            this.setmeal.orderDate=this.setmeal.orderDate.split(' ')[0];
                            /*for(ele of res.data.data){
                                this.setmeal=ele;
                            }*/
                        } else {
                            //查询失败,弹出提示信息
                            this.$message({
                                type: 'error',
                                message: res.data.message,
                                center: true
                            });
                        }
                    });
                } else {
                    location.href = "/pages/login.html";
                    return false;
                }
            }).catch(() => {
                this.$message("请求出错请重新登录!");
                location.href = "/pages/login.html";
                return false;
            });
        }
    });
</script>
</body>